{% extends base %}

{% block body %}

    <!-- {% include message/component/select_topic_dialog.html %} -->

    <!-- 文件上传的组件 -->
    {% include message/component/message_upload.html %}

    <!-- 消息处理组件 -->
    {% include message/component/message_event.html %}

    {% init tag = "todo" %}
    {% init title = "待办任务" %}
    {% init show_input_box = True %}

    <div class="card">
        <div class="card-title">
            <span>{{title}}</span>
            <div class="float-right">
                {% include common/button/back_button.html %}
            </div>
        </div>
    </div>

    {% if show_input_box %}
        <!-- 编辑器 -->
        <div class="card">
            <textarea class="col-md-12 input-box" placeholder="请输入待办任务..."></textarea>

            <input type="file" id="filePicker" class="hide" multiple/>

            <input type="button" name="" class="send-button btn btn-default select-topic-btn" value="#标签">
            <input type="button" id="filePickerBtn" class="send-button btn btn-default" value="添加附件"/>
            <input type="button" id="createTodoBtn" class="send-button btn" value="创建">
        </div>
    {% end %}

    {% if tag == "todo" %}
        <div class="card">
            <a class="list-link" href="/message/done">
                <span>已完成任务</span>
                <div class="float-right">
                    <span class="book-size-span">{{message_stat.done_count}}</span>
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
        </div>
    {% end %}

    <div class="col-md-12" id="todoItemList">
        <!-- 待办任务 AJAX加载 -->
    </div>

    <script type="text/javascript">
        $(function () {

            function loadTodoList() {
                var page = getUrlParam("page");
                if (page == undefined) {
                    page = 1;
                }

                var params = {
                    tag: "{{tag}}",
                    format: "html",
                    page: page,
                };
                $.get("/message/list", params, function (resp) {
                    // console.log(resp);
                    $("#todoItemList").html(resp);
                }).fail(function (e) {
                    console.error(e);
                    xnote.alert("调用接口失败，请重试");
                });
            }

            function onFileUploaded(event) {
                var inputText = event.target;
                var oldText = $(".input-box").val();
                var newText = oldText + "\n" + inputText + "\n";
                $(".input-box").val(newText);
            }

            function onMessageRefresh(event) {
                loadTodoList();
                xnote.closeAllDialog();
            }

            function onTopicSelected(event) {
                var topic = event.target;
                var oldText = $(".input-box").val();
                $(".input-box").val(topic + " " + oldText);
            }

            function updateMessageTag(id, tag) {
                $.post("/message/tag", {id: id, tag: tag}, function (resp) {
                    if (resp.code == "success") {
                        loadTodoList();
                    } else {
                        alert(resp.message);
                    }
                });
            }

            $("#createTodoBtn").click(function () {
                var content = $(".input-box").val();
                $.post("/message/save", 
                    {
                        content:content, 
                        tag: "task"
                    },
                    function (respText) {
                        var data = respText;
                        if (data.code != "success") {
                            xnote.alert(data.message);
                        } else {
                            $(".input-box").val("");
                        }

                        loadTodoList();
                }).fail(function (data) {
                    console.log(data);
                    xnote.alert("创建TODO失败，请稍后重试");
                })
            });

            $("#todoItemList").on("click", ".todo-delete-btn", function (e) {
                var target = e.target;
                var id = $(target).attr("data-id");
                var content = $(target).attr("data-content");

                xnote.confirm("确认删除 '%s' ?".format(content), function (result) {
                    $.post("/message/delete", {id: id}, function (resp) {
                        if (resp.code == "success") {
                            // 重新刷新页面
                            loadTodoList();
                        } else {
                            xnote.alert(data.message);
                        }
                    });                    
                });
            });

            $(".select-topic-btn").click(function (e) {
                xnote.showIframeDialog("选择标签", "/message?op=select&tag=key")
            })



            // 监听上传事件
            xnote.on("message.upload", onFileUploaded);
            xnote.on("message.refresh", onMessageRefresh);
            xnote.on("message.updated", onMessageRefresh);
            xnote.on("message.topic.selected", onTopicSelected);

            // 加载todo列表
            loadTodoList();

            // 加载音频文件
            xnote.loadAudio("todo_done", "/static/audio/todo_done.mp3");
        });
    </script>

{% end %}